<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D发光旋转正方体案例</title>
		<style>
			/* 15.背景样式美化 */
			body {
				/* 撑满整个视口viewport height高度 */
				height: 100vh;
				/* background:#000; */
				background-image: radial-gradient(#000,lightyellow,#000);
			}
			/* 4.给所有"面"做统一样式设置 */
			.boxs>div {
				/* 设置宽高 */
				width: 200px;
				height: 200px;
				/* 编码阶段暂时使用的边框，后续优化 */
				border: 3px solid red;
				/* 设置文字大小 */
				font-size: 80px;
				/* 文字水平居中 */
				text-align: center;
				/* 文字垂直居中 */
				line-height: 200px;
				/* 5.六个面先脱离文档流，后续再通过变换构建正方体 */
				position: absolute;
				/* 16.每个面的美化 */
				/* 金色的边框与文字 */
				border:1px solid gold;
				color: gold;
				/* 设置边框圆角 */
				border-radius: 30px;
				/* 设置带不透明度的背景颜色 1完全不透明 0透明到看不见 */
				background-color: rgba(255,255,255,0.6);
				/* 用阴影制作发光效果 */
				box-shadow: 0 0 60px 0 gold;
			}
			/* 6.定义视角 */
			.show {
				/* 视角距离一般就是800px
				 太小，距离太近，元素变形严重
				 太大，距离太远，元素3D效果不明显*/
				perspective: 800px;
			}
			/* 7.给"体"开启3D效果 */
			.boxs {
				/* 注意:给父元素加
				这样父元素中的所有子元素才可以使用3D变换效果 */
				transform-style: preserve-3d;
				/* 8.子元素绝对定位脱离了文档流，需要设置父亲的宽高 */
				width: 200px;
				height: 200px;
				/* 9.让正方体水平居中，垂直方向靠下一点 */
				margin: 200px auto;	
				/* 12.2 给正方体使用动画，六个面都需要同步旋转 */
				/* 播放动画:动画名turn 时长10s 匀速播放linear 无限次infinite */
				animation: turn 10s linear infinite;
			}
			/* 12.3 当悬停在正方体上时，动画播放状态暂停 */
			.boxs:hover {
				animation-play-state: paused;
			}
			/* 10.设置正方体中“前面”在空间中的位置 */
			.boxs>.p1 {
				transform: translateZ(100px);
			}
			/* 11.设置正方体中“后面”在空间中的位置 */
			.boxs>.p2 {
				/* 13.文字要设置水平镜面翻转 scaleX(-1)*/
				transform: translateZ(-100px) scaleX(-1);
			}
			/* 14.把后面剩下的4个面放到对应位置 */
			.boxs>.p3 {
				/* 先Y轴(垂直)旋转90度，再沿着Z轴出来100px */
				transform: rotateY(90deg) translateZ(100px);
			}
			.boxs>.p4 {
				/* 先Y轴(垂直)旋转90度，再沿着Z轴进去100px */
				transform: rotateY(90deg) translateZ(-100px) scaleX(-1);
			}
			.boxs>.p5 {
				/* 先X轴(水平)旋转90度，再沿着Z轴出来100px */
				transform: rotateX(90deg) translateZ(100px);
			}
			.boxs>.p6 {
				/* 先X轴(水平)旋转90度，再沿着Z轴进去100px */
				transform: rotateX(90deg) translateZ(-100px) scaleX(-1);
			}
			/* 12.1 定义动画，让正方体转起来 */
			@keyframes turn {
				100% {
					/* 表示到动画结束时，同时绕X轴、Y轴转1圈，Z轴不旋转 */
					transform: rotate3d(1,1,0,360deg);
				}
			}
		</style>
	</head>
	<body>
		<!-- 1.设置视角 -->
		<div class="show">
			<!-- 2.外层boxs代表正方"体" -->
			<div class="boxs">
				<!-- 3.内层每个div代表正方体的每个"面" -->
				<div class="p1">1</div>
				<div class="p2">2</div>
				<div class="p3">3</div>
				<div class="p4">4</div>
				<div class="p5">5</div>
				<div class="p6">6</div>
			</div>
		</div>
	</body>
</html>